<template>
  <div class="container" ref="containerRef"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import china from "./china.json";
import { onMounted, ref } from "vue";

// 注册地图
echarts.registerMap("china", china);

const containerRef = ref();

onMounted(() => {
  const myEcharts = echarts.init(containerRef.value);
  const option = {
    series: {
      type: "map",
      map: "china", // 使用 china 地图
      label: {
        show: true,
      },
      data: [
        {
          name: "北京",
          value: 10000,
        },
        {
          name: "广东",
          value: 1000,
        },
        {
          name: "新疆",
          value: 10,
        },
      ],
      zoom: 1.2,
    },
    visualMap: {
      type: "piecewise",
      pieces: [
        { gte: 1, lte: 9 },
        { gte: 10, lte: 99 },
        { gte: 100, lte: 999 },
        { gte: 1000, lte: 9999 },
        { gte: 10000 },
      ],
    },
  };
  myEcharts.setOption(option);
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  /* 相当于视口的布局单位 */
  width: 100vw;
  height: 100vh;
}
</style>
